<template>
	<view class="bigbox">
		<view class="head">
			<view>贷款计算器</view>
		</view>
		<view class="box">
			<view>
				<view>利息档位</view>
				<view class="box2">
					<input v-model="a1" type="number" disabled="disabled" placeholder-class="fot1" value="" placeholder="待计算"/>
					<text>%</text>
				</view>
			</view>
			<view>
				<view>银行成本</view>
				<view class="box2">
					<input v-model="a2" type="number" disabled="disabled" placeholder-class="fot1" value="" placeholder="待计算"/>
					<text>%</text>
				</view>
			</view>
			<view>
				<view>基础汇率</view>
				<view class="box2">
					<input v-model="a3" type="number" disabled="disabled" placeholder-class="fot1" value="" placeholder="待计算"/>
					<text>%</text>
				</view>
			</view>
			<view>
				<view>返点</view>
				<view class="box2">
					<input v-model="a4" type="number" placeholder-class="fot1" value="" placeholder="请输入"/>
					<text>%</text>
				</view>
			</view>
		</view>
		<view class="box">
			<view>
				<view>客户到手金额</view>
				<input v-model="a5" type="number" placeholder-class="fot1" value="" placeholder="请输入" />
			</view>
			<view>
				<view>银行合同金额</view>
				<input v-model="a6" type="number" placeholder-class="fot1" value="" disabled="disabled" placeholder="待计算" />
			</view>
			<view>
				<view>扩容金额</view>
				<input v-model="a7" type="number" placeholder-class="fot1" value="" disabled="disabled" placeholder="待计算" />
			</view>
			<view>
				<view>月供</view>
				<input v-model="a8" type="number" placeholder-class="fot1" value="" disabled="disabled" placeholder="待计算" />
			</view>
			<view>
				<view>实息</view>
				<input v-model="a9" type="number" placeholder-class="fot1" value="" disabled="disabled" placeholder="待计算" />
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				a1:'',
				a2:'10.00898',
				a3:'7.33',
				a4:'',
				a5:'',
				a6:'',
				a7:'',
				a8:'',
				a9:'',
				
			}
		},
		watch:{
			a5:function(){
				if(this.a5 != '' && this.a4 != ''){
					let s1 = this.a3*1 + this.a4*1
					let s2 = s1/100
					this.a7 = Math.ceil(this.a5 * s2 / 100) * 100;
					this.a6 = this.a5*1 + this.a7*1
					this.a8 = this.a6*1 * this.a2/100 / 36 + this.a6*1 / 36
					this.a8 = this.a8.toFixed(2)
					this.a9 = (this.a8 * 36 - this.a5*1) / 36 / this.a5*1
					this.a9 = this.a9.toFixed(6)
				}else if(this.a5 == '' || this.a4 != ''){
					this.a5 = ''
					this.a6 = ''
					this.a7 = ''
					this.a8 = ''
					this.a9 = ''
				}
			},
			a4:function(){
				if(this.a4 != ''){
					this.a1 = this.a2*1 + this.a3*1 + this.a4*1
					this.a1 = this.a1.toFixed(2)
				}else if(this.a4 == ''){
					this.a1 = ''
				}
				if(this.a5 != '' && this.a4 != ''){
					let s1 = this.a3*1 + this.a4*1
					let s2 = s1/100
					this.a7 = Math.ceil(this.a5 * s2 / 100) * 100;
					this.a6 = this.a5*1 + this.a7*1
					this.a8 = this.a6*1 * this.a2/100 / 36 + this.a6*1 / 36
					this.a8 = this.a8.toFixed(2)
					this.a9 = (this.a8 * 36 - this.a5*1) / 36 / this.a5*1
					this.a9 = this.a9.toFixed(6)
				}
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.box2{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.box2>input{
		width: 200rpx;
		text-align: right;
		/* border: 1px solid red; */
	}
	.fot1{
		font-size: 16rpx;
	}
	.xl>image{
		width: 20rpx;
		height: 16rpx;
		margin-left: 20rpx;
	}
	.xl{
		width: 150rpx;
		height: 50rpx;
		border-radius: 15rpx;
		box-shadow:0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.box>view>input{
		width: 200rpx;
		text-align: right;
	}
	.box>view{
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* border: 1px solid red; */
		margin-bottom: 20rpx;
	}
	.box{
		/* height:303rpx; */
		background:rgba(255,255,255,1);
		box-shadow:0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius:10rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}
	.head{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.bigbox{
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>
